<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个jQuery 页面</title>
       <!-- 引入bootsrap css -->
    <link rel="stylesheet" type="text/css" href="../lib/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../lib/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../lib/easyui/themes/bootstrap/easyui.css">
    <!--  定义页面样式  -->
    <style type="text/css">
      /*body {background-color:red}*/
        form {color:green}
    </style>
    <!--  <meta http-equiv="refresh" content="1">-->
    <!--  引入外部的js库-->
    <script src="../lib/easyui/jquery.min.js"></script>
<!--    <script src="../lib/bootstrap/js/bootstrap.js"></script>-->
    <script src="../lib/easyui/jquery.easyui.min.js"></script>
    <script src="../lib/easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
<button class="btn btn-default" id="btn1">按钮1</button><br/>
<lable class="label label-default">这是一个lable</lable>
<button class="btn btn-default bywl" id="btn2">按钮2</button>
<p>第1个P 标签</p>
<p>第2个P 标签</p>
<p class="mypclass" style="color:red;">第3个P 标签</p>
<p>第4个P 标签</p>

<table class="table table-striped table-bordered">
    <thead>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>地址</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>张三</td>
        <td>20</td>
        <td>湖南</td>
        <td><button id="btn_1" class="btn btn-primary">查看</button></td>
    </tr>
    <tr>
        <td>张三1</td>
        <td>21</td>
        <td>湖南</td>
        <td><button id="btn_2" class="btn btn-primary">查看</button></td>
    </tr>
    <tr>
        <td>张三2</td>
        <td>22</td>
        <td>湖南</td>
        <td><button id="btn_3" class="btn btn-primary">查看</button></td>
    </tr>
    <tr id="tbltr_4">
        <td>张三3</td>
        <td>23</td>
        <td>湖南</td>
        <td>
            <button id="btn_4" class="btn btn-primary">查看</button>
            <button  class="btn btn-danger">删除</button>
        </td>
    </tr>
    </tbody>
</table>

<script>
    // jquery 作业表格行 中增加一个删除按钮,点击之后要求提示 是否删除 remove hide <tr>

    // 浏览器执行 源码 是从上到下一行行执行
    // 被 依赖的先引入
    // css 要求在js 库之前引入

    // bs cs 编程思想是一致,界面表现形式不一样

    function hidebtn2(){
        console.log('关闭了消息提示框')
        $('#btn2').hide();
    }

    // $ 查找符号
    // ready(function(){}) 网页加载完成,则执行回调函数
    $(document).ready(function(){
        //$.messager.alert('系统提示','jquery easyui 引入成功1','warning')

        $('#btn1').on('click',function(e){
            // 业务逻辑 指你的代码
            $(this).hide();
            $.messager.alert('系统提示','点击了按钮1','info')

        });

        $('.bywl').on('click',function(e){
            // show 是显示节点的方法
            $('#btn1').show();
            // 根据标签 选择
            //$.messager.alert('label的内容',$('lable').text(),'info');

            $.messager.alert('系统提示','你点击了我','error',hidebtn2)
        })

        // 根据 标签和类选择
        $('p.mypclass').click(function(e){
            $.messager.alert('系统提示','你点击了p.mypclass')
        })
    })

    // 每个 button 都绑定事件
    $('button').click(function(e){
        console.log(e)
    })

    // 每个p标签绑定同样的事件
    $('p').on('click',function(e){
        // this 指的是当前的触发的节点
        $(this).hide();
    })

    $('button[id^="btn_"]').on('click',function(e){
        var idno = $(this).attr('id')
        console.log(idno)
        idno = idno.slice(4)
        // 根据 Id查询数据库  ajax ...
        var msg = '找到了数据 id= ' + idno + ' 内容是....'
        $.messager.alert('',msg)
    })


/*
    $(function(){
        $.messager.alert('系统提示','jquery easyui 引入成功2','warning')
    })
*/
</script>

</body>
</html>